// 添加和编辑 国际机构弹窗
import React, { Component } from 'react'
import { Button,Form, Input, Modal, Select,Upload ,Icon ,message ,Spin } from 'antd'
import { connect } from 'react-redux'
import Ueditor from '../../components/Ueditor'
/* 引用接口文档路径 */
import {
  addInternationalMachinery,editInternationalMachinery
} from 'actions/companyManage'
import {
  getbasetypefetch
} from 'actions/common'
const FormItem = Form.Item

@Form.create({
    mapPropsToFields(props) {
      return {
        name: Form.createFormField({
          ...props.content,
          value: props.content.name,
        }),
        nationName: Form.createFormField({
          ...props.content,
          value: props.content.nationId,
        }),
        nationIconPath: Form.createFormField({
          ...props.content,
          value: props.content.nationIconPath,
        }),
        iconPath: Form.createFormField({
          ...props.content,
          value: props.content.iconPath,
        }),
        description: Form.createFormField({
          ...props.content,
          value: props.content.description,
        }),
  
      };
    } 
})

@connect(
  (state, props) => ({
    config: state.config,
    userInfoList: state.userInfoList,
  })
)


export default class ModalAddInternationalMachinery extends Component {
  
    constructor (props) {
      super(props)
      this.state = {
        nationList:[],
        addNationImg:"",//国家图标
        addiconPath:"",//机构图标
        loading:false,
        loading2:false,
        description:""
      }
    }

    componentDidMount() {
      this.nationSelect();
    }

    componentWillMount() {
      this.setState({
        description:this.props.content.description,
        addNationImg:this.props.content.nationIconPath,
        addiconPath:this.props.content.iconPath
      })
    }

    nationSelect(){
      this.props.dispatch(getbasetypefetch(
      {"type":"2"},
      (respose) => {
        this.setState({
          nationList:respose.respData.resultData
        })
      }))
    }

    addReportSubmit(callback,e){//新增和编辑确定按钮
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
            if(!err){
              if(!this.state.addiconPath){
                message.error('请上传机构图标');
                return;
              }
              if(UE.getEditor('content').getContent() == '' || UE.getEditor('content').getContent().length == 0){
                message.error('请输入机构说明');
                return;
              }
              if(this.props.type == 1){
                //新增
                var datajson = {                    
                  "name":values.name,//机构名称
                  "nationName":values.nationName,//所属国家名称
                  "nationId":values.nationName,//所属国家ID
                  "nationIconPath":this.state.addNationImg,//所属国家LOGO
                  "iconPath":this.state.addiconPath,//机构logo
                  "description":UE.getEditor('content').getContent(),//机构说明
                }
                //新增              
                this.props.dispatch(addInternationalMachinery(
                datajson,
                (respose) => {
                    callback&&callback()
                    message.success(respose.respMsg);
                    this.props.ModalCancel();
                }))
              }else{
                //编辑
                var datajson = {     
                  "id":this.props.content.id,               
                  "name":values.name,//机构名称
                  "nationName":values.nationName,//所属国家名称
                  "nationId":values.nationName,//所属国家ID
                  "nationIconPath":this.state.addNationImg,//所属国家LOGO
                  "iconPath":this.state.addiconPath,//机构logo
                  "description":UE.getEditor('content').getContent(),//机构说明
                }             
                this.props.dispatch(editInternationalMachinery(
                datajson,
                (respose) => {
                    callback&&callback()
                    message.success(respose.respMsg);
                    this.props.ModalCancel();
                }))
              }
              
            }
        });       
    }
    render () {
        const { getFieldDecorator } = this.props.form;
        const content = this.props.content;
        const uploadImg = {
            name: 'file',
            action: global.$GLOBALCONFIG.$ctx+'image/full/path/upload',
            headers: {
              authorization: 'holder ' + sessionStorage.getItem('token'),
            },
            data:{
                type:"1"
            },
            accept:"image/jpg,image/png,image/jpeg",
            beforeUpload: (file)=>{
              const isImg = file.type.substring(0,5) === 'image';
              if (!isImg) {
                message.error('请选择图片');
              }
              this.setState({
                loading:true,
              }) 
              return isImg;
            },
            onChange:(info)=>{
              if (info.file.status !== 'uploading') {
                console.log('上传中')          
              }
              if (info.file.status === 'done') {
                console.log('上传完成')
                /* 把返回的路径赋值过去 */
                this.setState({
                  addNationImg: info.file.response.respData,
                  loading:false
                })
              } else if (info.file.status === 'error') {
                message.error(info.file.response.respMsg);
              }
            },
            showUploadList:false,//不展示上传完成之后的文件列表
        }
        const uploadIcon = {
            name: 'file',
            action: global.$GLOBALCONFIG.$ctx+'image/full/path/upload',
            headers: {
              authorization: 'holder ' + sessionStorage.getItem('token'),
            },
            data:{
                type:"1"
            },
            accept:"image/jpg,image/png,image/jpeg",
            beforeUpload: (file)=>{
              const isImg = file.type.substring(0,5) === 'image';
              if (!isImg) {
                message.error('请选择图片');
              }
              this.setState({
                loading2:true,
              })
              return isImg;
            },
            onChange:(info)=>{
              if (info.file.status !== 'uploading') {
                console.log('上传中')          
              }
              if (info.file.status === 'done') {
                console.log('上传完成')
                /* 把返回的路径赋值过去 */
                this.setState({
                  addiconPath: info.file.response.respData,
                  loading2:false
                })
              } else if (info.file.status === 'error') {
                message.error(info.file.response.respMsg);
              }
            },
            showUploadList:false,//不展示上传完成之后的文件列表
        }
        const formItemLayout = {
          labelCol: {
            //   xs: { span: 24},
                sm: { span: 3 },
            },
            wrapperCol: {
            //   xs: { span: 24 },
                sm: { span: 20 },
            },
        };
        return (
            <Modal
                width={"80%"}
                wrapClassName="vertical-center-modal"
                maskClosable={false}
                visible={this.props.ModalFlg}
                title={ "新增机构" }
                onCancel={this.props.ModalCancel}
                onOk={this.addReportSubmit.bind(this,this.props.callback)}
                destroyOnClose={true}
            >
            <div>
              <Form>
                <FormItem label="机构名称" {...formItemLayout}>
                  {
                    getFieldDecorator('name', {
                    rules: [{
                        required: true,message:"请输入机构名称"
                      }],
                    })(
                      <Input placeholder="请输入关键字" disabled={this.state.isChoose}  size="default" style={{ width: '180px' }} />
                    )
                  }                 
                </FormItem>
                <FormItem label="所属国家" {...formItemLayout}>
                  {
                    getFieldDecorator('nationName', {
                    rules: [{
                        required: true,message:"请选择所属国家"
                      }],
                    })(
                      <Select placeholder="请选择所属国家"    style={{ width: 150 }} >
                        {
                          this.state.nationList.map((item,i)=> {
                            return(
                              <Select.Option value={item.code} key={i}>{item.value}</Select.Option>
                            )
                          })
                        }
                      </Select> 
                    )
                  }
                </FormItem>
                <FormItem label="国家图标" {...formItemLayout}>
                    <Spin spinning={this.state.loading} style={{width:"80px"}}>
                      <img style={{width:"80px",height:"80px",verticalAlign:"bottom",marginRight:"10px"}} 
                          src={this.state.addNationImg ? this.state.addNationImg :require('../../images/baseImg.png')}
                      />
                    </Spin>
                    <Upload {...uploadImg}>                
                        <Button>点击选择图片</Button>
                    </Upload>  
                </FormItem>
                <FormItem label="机构图标" {...formItemLayout}>
                    <Spin spinning={this.state.loading2} style={{width:"80px"}}>
                      <img style={{width:"80px",height:"80px",verticalAlign:"bottom",marginRight:"10px"}} 
                          src={this.state.addiconPath ? this.state.addiconPath :require('../../images/baseImg.png')}
                      />
                    </Spin>
                    <Upload {...uploadIcon}>                
                        <Button>点击选择图片</Button>
                    </Upload>  
                </FormItem>
                <FormItem label="机构说明" {...formItemLayout}>
                  <Ueditor  id="content"  height="200"  value={this.state.description}/>  
                </FormItem>                
              </Form>
            </div>
          </Modal>
        )
    }
}